<!-- Copyright (c) 2019-2020 十三 all rights reserved. -->
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>易购商城-注册</title>
    <link rel="stylesheet" th:href="@{css/common.css}">
    <link rel="stylesheet" th:href="@{styles/login.css}">
    <link rel="stylesheet" th:href="@{styles/header.css}">
    <link rel="stylesheet" th:href="@{sweetalert/sweetalert.css}"/>
</head>
<body>
<div class="top center">
    <div class="logo center">
        <a href="./index.html" target="_blank"><img src="image/login-logo-2-medium.png" alt="" style="max-height: 72%"></a>
    </div>
</div>

<div class="form center">
    <div class="login">
        <div class="login_center">
            <div class="login_top">
                <div class="left fl">会员注册</div>
                <div class="right fr">您已有账号？<a href="login" target="_self">请登录</a></div>
                <div class="clear"></div>
                <div class="under-line center"></div>
            </div>
            <form id="registerForm" onsubmit="return false;">
                <div class="login_main center">
                    <div class="login-info">用户名:&nbsp;
                        <input class="login-info-input" type="text" name="username"
                               placeholder="请输入用户名" id="username"/>
                    </div>

                    <div class="login-info">手机号:&nbsp;
                        <input class="login-info-input" type="text" name="phone"
                                                             placeholder="请输入你的手机号" id="phone"/>
                    </div>
                    <div class="login-info">密&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;码:&nbsp;<input class="login-info-input"
                                                                                    type="password"
                                                                                    name="password"
                                                                                    id="password"
                                                                                    placeholder="请输入你的密码"/>
                    </div>
                    <div class="login-info">
                        验证码:&nbsp;
                        <input class="login-info-input verify-code" type="text" name="code" id="code"
                               placeholder="请输入验证码"/>
                        <button id="sendCode">发送验证码</button>
                    </div>
                </div>
                <div class="login_submit">
                    <input class="submit" type="button" onclick="register()" value="立即注册">
                </div>
            </form>
        </div>
    </div>
</div>
</body>
<!-- jQuery -->
<script th:src="@{jquery/jquery.min.js}"></script>
<script th:src="@{js/valid.js}"></script>
<script th:src="@{sweetalert/sweetalert.min.js}"></script>
<script type="text/javascript">

    // 验证码60s倒计时效果
    $(function () {
        $("#sendCode").click(function () {

            if ($(this).hasClass("disabled")) {
                // 正在倒计时

            } else {
                // 给指定手机号发送验证码
                $.get("/code?phone=" + $("#phone").val(), function (data) {
                    if (data.code !== 200) {
                        swal(data.msg, {
                            icon: "error",
                        });
                    }
                });
                timeoutChange();
            }
        })
    })
    let time = 60;
    function timeoutChange() {
        $("#sendCode").attr("class", "disabled");
        time--;
        if (time === 0) {
            $("#sendCode").text("发送验证码");
            time = 60;
            $("#sendCode").attr("class", "");
        } else {
            let msg = time + "s 后再次发送验证码";
            $("#sendCode").text(msg);
            setTimeout("timeoutChange()", 1000);
        }

    }

    // 注册按钮onclick事件改为register()即可
    function register() {
        let username = $("#username").val();
        if (!validUserName(username)) {
            swal('用户名限2~12个中文、字母、数字、下划线或减号', {
                icon: "error",
            });
            return false;
        }

        let phone = $("#phone").val();
        if (!validPhoneNumber(phone)) {
            swal('请输入正确的手机号', {
                icon: "error",
            });
            return false;
        }
        let password = $("#password").val();
        if (!validPassword(password)) {
            swal('请输入正确的密码格式(6-18位字符和数字组合)', {
                icon: "error",
            });
            return false;
        }
        let code = $("#code").val();
        if (!validLength(code, 4)) {
            swal('请输入正确的验证码', {
                icon: "error",
            });
            return false;
        }
        //验证
        let params = $("#registerForm").serialize();
        let url = '/registering';
        $.ajax({
            type: 'POST',//方法类型
            url: url,
            data: params,
            success: function (result) {
                if (result.code === 200) {
                    swal({
                        title: "注册成功",
                        text: "是否跳转至登录页?",
                        icon: "success",
                        buttons: true,
                        dangerMode: true,
                    }).then((flag) => {
                            if (flag) {
                                window.location.href = '/login';
                            }
                        }
                    );
                } else {
                    swal(result.msg, {
                        icon: "error",
                    });
                }
            },
            error: function () {
                swal("操作失败", {
                    icon: "error",
                });
            }
        });
    }
</script>
</html>
